<template>
    <div class="adminhome">
        <div class="header">
            <!--头部组件引入-->
            <HeaderContent></HeaderContent>
        </div>
        <div class="Content">
            <div class="frame-left">
                <div class="left-content">
                    <!--左侧导航栏组件-->
                    <ManvLeft></ManvLeft>
                </div>
            </div>
            <div class="frame-right">
                <div class="right-content">
                    <!--右侧内容显示区-->
                    <router-view></router-view>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import ManvLeft from './entrance/ManvLeft.vue'
import HeaderContent from './entrance/Header'
export default {
    components: { HeaderContent, ManvLeft },
    name: 'AdminHome',
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/*框架样式布局*/

.adminhome {
    height: 100%;
}

.header {
    position: absolute;
    width: 100%;
    background-color: #175AA9;
    height: 60px;
    padding: 10px 40px;
    z-index: 2;
}

.Content {
    height: 100%;
    padding-top: 60px;
    position: relative;
    z-index: 1;
}

.frame-left {
    position: absolute;
    top: 0;
    width: 140px;
    height: 100%;
    padding: 60px 0 0 0;
    box-shadow: 0 0 10px 0 #999;
    overflow-y: auto;
}

.left-content {
    height: 100%;
    background-color: #fff;
    overflow: hidden;
}

.frame-right {
    height: 100%;
    width: 100%;
    padding: 0 0 0 180px;
}

.right-content {
    min-width: 900px;
    position: relative;
    height: 100%;
    overflow: auto;
}
</style>